<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			html,
			body {
				background-color: white;
			}
			
			.wrap-search {
				margin: 15px;
				background: #E6E6E6;
				height: 30px;
				border-radius: 5px;
				text-align: center;
			}
			
			.item-img {
				width: 60px;
				height: 90px;
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" style="background: white;">
			<div class="wrap-search">
				<span class="mui-icon mui-icon-search" style="line-height: 30px;color: #AAAAAA;font-size: 16px;"></span>
				<span style="line-height: 30px;color: #AAAAAA;font-size: 14px;">电影/电视剧/影人</span>
			</div>

			<div id="refreshContainer" class="mui-scroll-wrapper" style="top: 50px;">
				<div class="mui-scroll">
					<ul id="movies" class="mui-table-view">
						<li class="mui-table-view-cell" v-for="item in movies" @tap="open_detail(item)">
							<img class="mui-pull-left item-img" :src="item.cover" />
							<div class="mui-ellipsis dark-big">
								{{item.title}}
							</div>
							<div class="mui-ellipsis">
								<span class="gray-small">{{item.genres}}</span>&nbsp;
								<span v-if="item.score>0" class="orange-small">{{item.score}}分</span>
								<span v-else class="orange-small">暂无评分</span>
							</div>
							<div class="mui-ellipsis gray-small">
								导演：{{item.directors}}
							</div>
							<div class="mui-ellipsis gray-small">
								主演：{{item.casts}}
							</div>
						</li>
					</ul>
				</div>

			</div>
		</div>

		<script src="js/util.js"></script>
		<script src="js/vue.min.js"></script>
		<script type="text/javascript">
			//Vue数据
			var data_movies = new Vue({
				el: '#movies',
				data: {
					movies: []
				}
			});
			var aniShow = {};
			mui.init({
				swipeBack: true, //启用右滑关闭功能
				pullRefresh: {
					container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						auto: false, //可选,默认false.首次加载自动下拉刷新一次
						callback: refreshData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					},
					up: {
						height: 50, //可选.默认50.触发上拉加载拖动距离
						auto: true, //可选,默认false.自动上拉加载一次
						contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: loadMoreData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			});

			//刷新数据，重新调用接口
			function refreshData() {
				//请求热映列表接口
				mui.getJSON('https://api.douban.com/v2/movie/in_theaters', {
					start:0,
					count:10
				}, function(resp) {
					data_movies.movies.splice(0,data_movies.movies.length);
					data_movies.movies = data_movies.movies.concat(convert(resp.subjects));
					mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					mui('#refreshContainer').pullRefresh().refresh(true);
				});
			}
			//请求下一页数据
			function loadMoreData(){
				//请求热映列表接口
				mui.getJSON('https://api.douban.com/v2/movie/in_theaters', {
					start:data_movies.movies.length,
					count:10
				}, function(resp) {
					data_movies.movies = data_movies.movies.concat(convert(resp.subjects));
					mui('#refreshContainer').pullRefresh().endPullupToRefresh(data_movies.movies.length > resp.total);
				});
			}

			mui.plusReady(function() {
				var self = plus.webview.currentWebview(),
					nviews = self.getSubNViews(),
					subpages = util.options.subpages;
				//创建子webview窗口 并初始化
				util.initSubpage();
				var activePage = plus.webview.currentWebview();

				//给每个view 添加监听点击切换
				for(var i = 0; i < 3; i++) {
					nviews[i].addEventListener('click', clickEvent, false);
				}

				// 自定义 tab 点击事件
				function clickEvent(e) {
					var currId = e.target.id,
						currIndex = parseInt(currId.substr(currId.length - 1, 1) - 1),
						currView = self.getStyle().subNViews[currIndex];

					// 匹配对应tab窗口	
					if(currIndex > 0) {
						targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
					} else {
						targetPage = plus.webview.currentWebview();
					}

					if(targetPage == activePage) {
						return;
					}

					if(currIndex !== 3) {
						//底部选项卡切换
						util.toggleNview(currView, currIndex);
						// 子页面切换
						util.changeSubpage(targetPage, activePage);
						//更改当前活跃的页面
						activePage = targetPage;
					}
				}
			});

			//给搜索框添加点击事件
			mui('.wrap-search')[0].addEventListener('tap', function() {
				mui.openWindow({
					id:'search',
					url:'./html/search.html'
				});
			});

			mui('.mui-scroll-wrapper').scroll({
				indicators:false
			});
			
			//预加载电影详情页面
			var detailPage = mui.preload({
				id:'movie-detail',
				url:'./html/movie-detail.html'
			});
			
			//打开电影详情页面
			function open_detail(item){
				//触发详情页面的movieId事件
				mui.fire(detailPage,'movieId',{
					id:item.id
				});
				//打开
				mui.openWindow({
					id:'movie-detail'
				});
			}
			
			//数据转换
			function convert(items) {
				var newItems = [];
				//遍历items
				items.forEach(function(item) {
					var genres = item.genres.toString().replace(/,/g, ' / ');
					//导演
					var directors = '';
					for(var i = 0; i < item.directors.length; i++) {
						directors += item.directors[i].name;
						if(i != item.directors.length - 1) {
							directors += ' / ';
						}
					}
					//演员
					var casts = '';
					for(var i = 0; i < item.casts.length; i++) {
						casts += item.casts[i].name;
						if(i != item.casts.length - 1) {
							casts += ' / ';
						}
					}

					newItems.push({
						id: item.id,
						title: item.title,
						genres: genres,
						cover: item.images.large,
						score: item.rating.average,
						directors: directors,
						casts: casts
					});
				});

				return newItems;
			}
		</script>
	</body>

</html>